<template>
    <view>
        <view class="box bg">
            <view class="viewtext">
                <v-tabs v-model="current" :tabs="topnav" field="name" height="60rpx" @change="change" :pills="true"
                    line-height="0" activeColor="#fff" pillsColor="#1bc078" pillsBorderRadius="30rpx"
                    paddingItem="0 50rpx">
                </v-tabs>
            </view>

        </view>
        <view v-for="(item,index) in list" :key="index">
            <view class="boxson">
                <!-- 头部区域 -->
                <view style="display: flex;justify-content: space-between;justify-content: space-between;">
                    <text>{{item.type_text}}</text>
                    <text class="textget">{{item.weigh_type_text}}</text>
                    <text>{{item.create_time}}</text>
                </view>
                <hr class="hr" />
                <!-- 展示内容区域 -->
                <view class="main">
                    <block v-for="(recycledItem,recycledIndex) in item.recycled " :key ="recycledIndex"> 
                        <u-table>
                            <u-tr>
                                <u-th>货品名称</u-th>
                                <u-th>单价</u-th>
                                <u-th>数量</u-th>
                                <u-th>总价</u-th>
                            </u-tr>
                            <u-tr>
                                <u-td>{{recycledItem.wp_name}}</u-td>
                                <u-td>{{recycledItem.unit_price}}</u-td>
                                <u-td>{{recycledItem.nums}}</u-td>
                                <u-td>{{recycledItem.total_price}}</u-td>
                            </u-tr>
                            <u-tr>
                                <u-th>毛重</u-th>
                                <u-th>皮重</u-th>
                                <u-th>净重</u-th>
                                <u-th>需求</u-th>    
                            </u-tr>
                            <u-tr>
                                <u-td>{{recycledItem.b_weigh}}</u-td>
                                <u-td>{{recycledItem.a_weigh}}</u-td>
                                <u-td>{{recycledItem.b_weigh - recycledItem.a_weigh}}</u-td>
                                <u-td>{{recycledItem.need_nums}}</u-td>
                            </u-tr>
                            <u-tr v-if="recycledItem.old">
                                <u-th>原毛重</u-th>
                                <u-th>原皮重</u-th>
                                <u-th>原净重</u-th>
                                <u-th>误差</u-th>    
                            </u-tr>
                            <u-tr v-if="recycledItem.old">
                                <u-td>{{recycledItem.old.b_weigh}}</u-td>
                                <u-td>{{recycledItem.old.a_weigh}}</u-td>
                                <u-td>{{recycledItem.old.b_weigh - recycledItem.old.a_weigh}}</u-td>
                                <u-td>{{(recycledItem.old.b_weigh - recycledItem.old.a_weigh) - (recycledItem.b_weigh - recycledItem.a_weigh)}}</u-td>
                            </u-tr>
                            <u-tr>
                                <u-th>毛重时间</u-th>
                                <u-th>皮重时间</u-th>                                
                            </u-tr>
                            <u-tr>
                                <u-td>{{recycledItem.b_time}}</u-td>
                                <u-td>{{recycledItem.a_time}}</u-td>
                            </u-tr>
                        </u-table>
                    </block>
                </view>
                <hr class="hr" />
                <!-- 按钮区域 -->
                <view class="button">
                    <view  style="display: flex;justify-content: space-between;">
                        <view style="display: flex;align-items: center;">
                            <text class="datasum">服务点: {{item.recovery.service?item.recovery.service.service_name :'' }}</text>
                        </view>
                        <view style="display: flex;align-items: center;">
                            <text class="datasum">发货单位: {{item.recovery.phone_name}}</text>
                        </view>
                    </view>
                    <view  style="display: flex;justify-content: space-between;">
                        <view style="display: flex;align-items: center;">
                            <text class="datasum">过磅员: {{item.recovery.re_name}}</text>
                        </view>
                        <view style="display: flex;align-items: center;">
                            <text class="datasum">收货单位: {{item.to_service ? item.to_service.service_name : ''}}</text>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            data: Object
        },
        data() {
            return {
                isShow: true,
                current: 0,
                house_id: 0,
                page: 1,
                last_page: 1,
                topnav: [{
                        name: '全部',
                        id: 1,
                    }, {
                        name: '入库',
                        id: 2,
                    }, {
                        name: '出库',
                        id: 3,
                    },
                    {
                        name: '退回',
                        id: 3,
                    }
                ],
                list: []
            }
        },
        onLoad(e) {
            if (e.house_id) {
                this.house_id = e.house_id
            }
            this._getInfo()
            this._postServiceReceipt()
        },
        onReachBottom() {
            if (this.page < this.last_page) {
                this.page++
                this._postServiceReceipt()
            }
        },
        methods: {
            // 用户信息api
            _getInfo() {
                this.$u.api.getInfo().then(res => {
                    this.userInfo = res;
                    this.is_edit_price = res.is_edit_price
                    this._getwptypelist(res.service_id)
                })
            },
            _getwptypelist(service_id) {
                this.$u.api.getwptypelist({service_id:service_id}).then(res => {
                    res.forEach((item,index) => {
                        item.plist.forEach((it,idx) => {
                            return it.extra = it.u_price+','+it.unit
                        })
                    })
                    uni.setStorageSync('setWptypeList',res)
                })
            },
            timestampToTime(timestamp) {
              // 时间戳为10位需*1000，时间戳为13位不需乘1000
              var date = new Date(timestamp * 1000);
              var Y = date.getFullYear() + "-";
              var M =
                (date.getMonth() + 1 < 10
                  ? "0" + (date.getMonth() + 1)
                  : date.getMonth() + 1) + "-";
              var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
              var h = date.getHours() + ":";
              var m = date.getMinutes() + ":";
              var s = date.getSeconds();
              return Y + M + D + h + m + s;
            },
            change(index) {
                this.current = index
                this.swiperCurrent = index
                this.page = 1
                this.last_page = 1
                this._postServiceReceipt()
            },
            _postServiceReceipt() {
                this.$u.api.postServiceReceipt({
                    house_id: this.house_id,
                    page: this.page,
                    current: this.current
                }).then(res => {
                    this.last_page = res.last_page
                    if (this.page == 1) {
                        this.list = res.data
                    } else {
                        this.list = this.list.concat(res.data)
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    /* 标记完成背景 */
    .shodo {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        // height: 100vh;
        /* background-color: #EEEEEE; */
    }

    .box {
        position: relative;
        margin: 0 30rpx 30rpx 30rpx;
        width: 690rpx;
        // height: 410rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
    }

    .boxson {
        padding: 30rpx;
        font-size: 24rpx;
        color: #888888;
        background-color: #fff;
        margin: 20rpx;
    }

    .hr {
        margin: 18rpx 0;
        height: 1rpx;
        background-color: #efeff0;
    }

    .main {
        position: relative;

        .img {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }

    .image {
        position: relative;
        top: 5rpx;
        left: 0rpx;
        width: 26rpx;
        height: 32rpx;
    }

    .down {
        width: 50rpx;
        height: 50rpx;
    }

    .call {
        position: absolute;
        right: 40rpx;
        height: 40rpx;
        background-color: #defbef;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #1bc078;
        line-height: 40rpx;
    }

    .setbutton {
        // position: absolute;
        // right: 30rpx;
        width: 163rpx;
        height: 60rpx;
        background-color: #ff4200;
        border-radius: 30rpx;
        line-height: 60rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        margin: unset;
    }

    .editsetbutton {
        // position: absolute;
        // right: 200rpx;
        min-width: 163rpx;
        height: 60rpx;
        background-color: #ffffff;
        border-radius: 30rpx;
        border: solid 2rpx #0babe0;
        font-size: 24rpx;
        line-height: 60rpx;
        color: #0babe0;
    }

    .oksetbutton {
        // position: absolute;
        // right: 30rpx;
        min-width: 163rpx;
        height: 60rpx;
        background-color: #0babe0;
        border-radius: 30rpx;
        font-size: 24rpx;
        line-height: 60rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
        margin-left: 30rpx;
    }

    p {
        margin-top: 20rpx;
    }

    .textget {
        float: right;
        color: #FF0000;
    }

    .textblue {
        color: #0babe0;
    }

    .texteee {
        color: #888888;
    }

    .datasum {
        // position: absolute;
        // right: 30rpx;
        // top: 0;
        margin-right: 40rpx;
    }

    .button {
        // margin-bottom: 30rpx;
    }
</style>
